<template>
   <div>
        <el-button  @click="filterShow1=true" type="primary" size='small'>筛选车型信息</el-button>
        <el-button  @click="filterShow2=true" type="primary" size='small'>车型ID筛选</el-button>
        <el-dialog title="筛选" :visible.sync="filterShow1" width="580px" center top="50px" :close-on-click-modal='false' >
            <el-table :data="list" style="width:100%;" :height="height" @selection-change="setKeyIds" size="mini">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column label="筛选关键词" align="center" width="250">
                    <template slot-scope="scope">
                        <el-autocomplete
                            style='width:220px' 
                            placeholder="请输入筛选关键词" 
                            :value='scope.row.text'
                            @focus="inputFocus(scope.row)"
                            @input="inputed"
                            :debounce="400"
                            :fetch-suggestions="querySearch2"
                            size="mini">
                                <template slot-scope="props">
                                    <div class="name">{{ props.item.valueKey }}</div>
                                </template>
                            </el-autocomplete>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="filterShow1=false">取消</el-button>
              <el-button type="primary" @click="onsubmit">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="筛选" :visible.sync="filterShow2" width="580px" center top="50px" :close-on-click-modal='false' >
            <el-table :data="list" style="width:100%;" :height="height" @selection-change="setKeyIds" size="mini" :span-method="objectSpanMethod">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column :label="'车型Id ('+countId+')'" align="center" width="250">
                    <template slot-scope="scope">
                        <div :style="'width:100%;height:'+list.length*36+'px;'">
                            <el-input @input="textareaInput" type="textarea" :rows="list.length*1.7"  placeholder="请将Excel中的车型Id复制进输入框" v-model="textarea" resize="none"></el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="filterShow2=false">取消</el-button>
              <el-button type="primary" @click="idSubmit">确定</el-button>
            </span>
        </el-dialog>
   </div>
</template>

<script>

export default {
    name: 'modelFilter',
    data(){
      return {
        filterShow1:false,
        filterShow2:false,
        height:0,
        textarea:"",
        countId:0,
        list:[{
            keyId:'',
            keyName:'',
            text:'',
        }],
        keyIds:[],
        inputRow:{
            keyId:'',
            text:'',
        },
        restaurants:null
      }
    },
    methods: {
        filterInit:function(){
            this.$http.post(this.$store.state.url+"/modelfilterinit").then(
                response=>{
                    this.list=response.data.data;
                }
            ).catch(error=>{});
        },
        onsubmit:function(){
            this.$emit('setModelTableLoading');

            var params = new URLSearchParams();
            for(var i=0;i<this.keyIds.length;i++){
                params.append('keyIds', this.keyIds[i].keyId); 
            }
            for(var i=0;i<this.list.length;i++){
                if(this.list[i].text.trim()!="")params.append(this.list[i].keyId, this.list[i].text);
            }
            
            this.$http.post(this.$store.state.url+'/modelfilterv3',params).then(
                response=>{
                    if(response.data.status==200){
                        this.$emit('setModelData',response.data.data);
                    }else{
                        var modelData=new Object();
                        modelData.headerList=this.keyIds;
                        modelData.modelList=[];
                        console.log(modelData)
                        console.log('7777')
                        this.$emit('setModelData',modelData);
                    }
                }).catch(error=>{});
            this.filterShow1=false;
        },

        setKeyIds:function(val){
            this.keyIds=val;
        },
        inputFocus:function(row){
            this.inputRow=row;
        },
        inputed:function(val){
            this.inputRow.text=val;
        },
        querySearch:function(queryString, callback) {
            this.$http.post(this.$store.state.url+'/lenovo','keyId='+this.inputRow.keyId+"&text="+queryString).then(
                response=>{
                    var rs=response.data.data;
                    var restaurants=[];
                    for(var i=0;i<rs.length;i++){
                        restaurants.push({valueKey:rs[i].text,value:rs[i].text});
                    }
                    //var restaurants = this.restaurants;
                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    // 调用 callback 返回建议列表的数据
                    callback(results);
                }
            ).catch();
        },
        querySearch2:function(queryString, callback) {
            queryString=queryString.replace("，",",");
            var params=new URLSearchParams();
            params.append("keyId",this.inputRow.keyId);
            params.append("text",queryString);
            for(var i=0;i<this.list.length;i++){
                var text=this.list[i].text.trim();
                if(text!="")params.append(this.list[i].keyId, text);
            }
            this.$http.post(this.$store.state.url+'/property/autocomplete',params).then(
                response=>{
                    var restaurants=response.data.data;
                    //var restaurants = this.restaurants;
                    //var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    //调用 callback 返回建议列表的数据
                    callback(restaurants);
                }
            ).catch();
        },
        createFilter:function(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        objectSpanMethod:function({ row, column, rowIndex, columnIndex }){
            if (columnIndex === 2) {
                if (rowIndex === 0) {
                    return {
                        rowspan: this.list.length,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        textareaInput:function(){
            var texts=[],
            texts=this.getModelIds();
            this.countId=texts.length;
        },
        getModelIds:function(){
            var texts=[],
            texts=this.textarea.split("\n");
            for(var i=0;i<texts.length;){
                var id=0;
                try {
                    id=Number.parseInt(texts[i].trim());
                } catch (error) {}
                if(Number.isNaN(id)){
                    texts.splice(i,1);
                }else{
                    i++;
                }
            }
            return texts;
        },
        idSubmit:function(){
            this.$emit('setModelTableLoading');
            var modelData=new Object();
            modelData.headerList=this.keyIds;
            modelData.currentPage=1;
            modelData.modelIdList=this.getModelIds();
            modelData.modelList=[];
            this.$emit('setModelData',modelData);
            this.$emit('tablePage',1);
            this.filterShow2=false;
        }
    },
    created:function(){
        this.height=window.innerHeight-300;
        this.filterInit();
    }
}

</script>

<style scoped>

</style>
